<!-- prettier-ignore -->
<template>
  <div class="problem-type">
    <div class="query-box">
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div>
          <el-input placeholder="统一标准地址" size="small" style="width: 300px;margin-right:10px">
            <el-button slot="append" icon="el-icon-search" type="primary"></el-button>
          </el-input>
          <el-select v-model="selectOption" size="small" style="width:300px">
            <el-option label="全部（17项质检问题）" value="all"></el-option>
            <el-option v-for="(item,index) in problemOptions" :key="index" :label="item.label" :value="item.label"></el-option>
          </el-select>
          <span style="margin-left: 10px;color: #6e6e6e">问题地址总数量：87条</span>
        </div>
        <el-button size="small" type="primary">问题地址下发</el-button>
      </div>
    </div>
    <el-table :data="detailTable" header-row-class-name="table-header" max-height="490px" row-class-name="row-class"
              size="mini" stripe>
      <el-table-column align="center" fixed="left" type="selection"></el-table-column>
      <el-table-column align="center" fixed="left" label="序号" type="index" width="50"></el-table-column>
      <el-table-column align="center" fixed="left" label="统一标准地址" min-width="300" prop="tydzmc"></el-table-column>
        <el-table-column v-for="(item,index) in tableColumn" :key="index" :label="item.label" :prop="item.prop"
                         :width="['tysbdm'].includes(item.prop) ? '180': '120'" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div :style="{color: (row.red && row.red.indexOf(item.prop) > -1) ? 'red':''}">
              <span v-if="row[item.prop]">{{row[item.prop]}}</span>
              <span v-else style="color:red">*</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="质检结果">
          <template slot-scope="{row}">
            <span v-if="row['f17']" style="color: red">未通过</span>
            <span v-else style="color:#67c23a">通过</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="问题数量">
          <template slot-scope="{row}">
            <span v-if="row['f17']">{{row['f17'].split('\n').length}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="问题描述" prop="f17" width="300">
          <template slot-scope="{row}">
            <div style="white-space: pre-wrap">{{row['f17']}}</div>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination :page-size="queryParams.size" :total="total" background layout="total,prev, pager, next" style="text-align: right;margin-top: 12px" @current-change="pageChange"></el-pagination>

  </div>
</template>

<script>
import axios from 'axios'

import rulesJson from '@/assets/rules.json';

export default {
  name: 'problemType',
  props:{
    taskId:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      selectOption:'all',
      problemOptions:[],
      tableColumn:[
        {
          label:'省',
          prop:'shengmc'
        },
        {
          label:'市',
          prop: 'shimc'
        },
        {
          label:'区（县）',
          prop:'qumc'
        },
        {
          label:'街道',
          prop:'jdmc'
        },
        {
          label:'社区',
          prop:'sqmc'
        },
        {
          label:'道路',
          prop:'dlmc'
        },
        {
          label:'门牌号',
          prop:'mph'
        },
        {
          label:'小区',
          prop:'xqmc'
        },
        {
          label:'建筑物',
          prop:'jzw'
        },
        {
          label:'楼牌号',
          prop:'ldmc'
        },
        {
          label:'单元',
          prop:'dyh'
        },
        {
          label:'楼层',
          prop:'floor'
        },
        {
          label:'户室',
          prop:'fjhm'
        },
        {
          label:'行政区划编码',
          prop:'shequdm'
        },
        {
          label:'统一地址编码',
          prop:'tysbdm'
        }
      ],
      total:87,
      queryParams:{
        page:1,
        size: 10,
        id:'1807003968719900674',
        status:1
      },
      detailTable:[]
    }
  },
  mounted(){
    this.problemOptions = rulesJson.qualityTest
    this.queryParams.id = this.taskId
    this.getAllProblem()
  },
  methods:{
    pageChange(pageNum){
      this.queryParams.page = pageNum
      this.getAllProblem()
    },
    async getAllProblem(){
      try{
        const res = await axios.get(`${window.baseUrl}/address/check/getResult`,{
          params:this.queryParams
        })
        this.detailTable = res.data.data.records
        // this.total = res.data.data.total
      }catch(err){
        console.log(err);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.problem-type{
  .query-box{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
}
</style>